<template>
  <div class="site-aside-container">
    <template v-if="data">
      <div class="touX">
        <div class="address">{{ address }}</div>
        <Avatar :url="data.avatar" />
      </div>
      <h1 class="title">{{ data.siteTitle }}</h1>
    </template>

    <Menu />
    <Contact v-if="data" />
    <p v-if="data" class="footer">
      {{ data.icp }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { getIpAddress } from '@/api/visitor.ts'
import { useSettings } from '@/stores/useSettingsStore'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
const store = useSettings()
const { data } = storeToRefs(store)
const address = ref('')
onMounted(async () => {
  let { result } = await getIpAddress()
  address.value = result.ad_info.province + result.ad_info.city + result.ad_info.district
})
</script>

<style scoped lang="scss">
@import '@/styles/var';
.site-aside-container {
  width: 100%;
  height: 100%;
  background: $dark;
  padding: 20px 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
.avatar-container {
  margin: 0 auto;
}
.footer {
  text-align: center;
  font-size: 12px;
  color: $gray;
}
.title {
  font-size: 1.2em;
  color: #fff;
  text-align: center;
}
.showDemo2 {
  width: 200px;
}
.address {
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: 0.3s;
  margin-bottom: 5px;
  color: #fff;
  text-align: center;
}
.touX {
  &:hover {
    .address {
      transform: scaleY(1);
    }
  }
}
</style>
